import React from "react";
import "./TodoMain.css";

export default function TodoMain(props) {
  let { todos, checkTodo, removeTodo } = props;

  return (
    <ul className="todo-main">
      {todos.map((item) => {
        return (
          <li key={item.id}>
            <label>
              <input
                type="checkbox"
                checked={item.done}
                onChange={(e) => {
                  //更新任务的 done 属性值
                  checkTodo(item.id, e.target.checked);
                }}
              />
              <span className={item.done ? "done" : ""}>{item.title}</span>
            </label>
            <button
              className="btn btn-danger"
              onClick={() => {
                if (window.confirm("您确定要删除该条数据么")) {
                  //删除
                  removeTodo(item.id);
                }
              }}
            >
              删除
            </button>
          </li>
        );
      })}

      {todos.length === 0 && <li style={{textAlign: 'center', padding: '20px 0'}}>暂无数据</li>}
    </ul>
  );
}
